<template>
    <div>
        <h4>子组件</h4>
        <!-- <div>当前是父组件传来的数据：：{{props.data}}</div>   注释因为下面使用了另外一种写法 没有定义的props变量 -->
        <!-- 如果你不需要在js里面使用父传子的数据，可以不使用变量接收，
         defineProps([]) 会自动把接收到的父传子数据挂载到当前组件的props对象中，暴露给template-->
         <!--  -->
        <div>这里不使用pros获取数据：{{ data.data }}</div>
        <hr>

        <p>子传父</p>
        <p>
            <!--            触发事件         传递的数据一个一个传 传多个-->
            <button @click="emit('example', '传回父组件的数据' )">子组件向父组件传递数据</button>
        </p>
    </div>

</template>


<script setup>
//可导入 可不导入 不会报错
import { defineProps ,ref} from 'vue';
/**
 *  组合式 API 父传子
 *     获取父组件传递过来的数据 
 * 
 */

//定义变量 并且接收父组件的数据  
// const props = defineProps(['data',fn])

//另外一种写法
const data = defineProps({
    data:{
        type:String,
        default:'99999'
    }
})


/**
 *  子传父：
 *      1：在父组件准备一个用于emit的方法
 *      2：在子组件写一个自定义事件
 *      3：definedEmit接收自定义事件
 *      4：在子组件emit自定义事件
 */
// 定义自定义事件  接收父组件上面写的自定义事件 example和父组件上面定义的一样
const emit =  defineEmits(['example'])   //多个自定义事件 都可以在这里接收
//定义一个子组件的数据 用来传递给父组件
const emitdata = ref({
    data:{
        name:'lanlan',
        age:18,
        sex:'女'
    }
})


</script>


<style lang="">
    
</style>